<template>
  <div id="wrap" style="background: rgb(237, 241, 245)" :style="{ fontSize:fontSize + 'px' }">
    <v-noticebar></v-noticebar>
    <v-header
      :back="!$route.query.time"
      title="风险测试">
    </v-header>
    <a class="selectedLevel" style="margin-top: 61px;">选择您的投资风格</a>
    <v-button
      v-for="(item, idx) in level"
      style="margin: 1em auto"
      :key="idx"
      :title="item.title"
      :active="item.active"
      @click.native="selected(idx, item)"
      ></v-button>
    <a class="gotoRisk" @click="$route.query.time ? $router.push('/risklevelquestion?time=first') : $router.push('/risklevelquestion')">不了解您的投资风格？ 点击前往风险评级 >>></a>
    <v-button
      style="margin: 50px auto 0 auto;"
      :active="true"
      ref="complateBtn"
      title="完成测评"
      @click.native="completeRisk"
      ></v-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
  name: 'risk-level',
  data () {
    return {
      fontSize: 10,
      selectedLevel: {
        id: 'balance'
      },
      level: [
        {
          title: '保守',
          id: 'conservative',
          active: false
        },
        {
          title: '中等保守',
          id: 'midConservative',
          active: false
        },
        {
          title: '平衡',
          id: 'balance',
          active: true
        },
        {
          title: '中等进取',
          id: 'midAggressive',
          active: false
        },
        {
          title: '进取',
          id: 'aggressive',
          active: false
        }
      ]
    }
  },
  methods: {
    selected(idx, item) {
      if (item.active) this.deleyCompleteRisk(idx)
      this.level.forEach((item, idx) => {
        item.active = false
      })
      this.level[idx].active = true
      this.selectedLevel = this.level[idx]
    },
    completeRisk() {
      this.baseService.post('/usr/riskLevel', {"level" : this.selectedLevel.id}).then((res) => {
        Toast({
          message: `填写成功！`,
          duration: 1000
        })
        setTimeout(() => {
          this.$route.query.time ? this.$router.push('/open2?time=first') : this.$router.push('/riskratings?refresh=true')
        }, 1000)
      })
    },
    deleyCompleteRisk (idx) {
      this.baseService.post('/usr/riskLevel', {"level" : this.level[idx].id}).then((res) => {
        Toast({
          message: `填写成功！`,
          duration: 1000
        })
        setTimeout(() => {
          this.$router.push('/riskratings?refresh=true')
        }, 1000)
      })
    }
  },
  created () {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
  }
}

</script>

<style lang="less" scoped>
.selectedLevel {
  padding: 0.5em 1.6em 0.2em 1.6em;;
  display: block;
  font-size: 1.5em;
}
.gotoRisk {
  font-size: 1em;
  display: block;
  padding: .5em 2.6em;
  color: black;
}
</style>
